import React, { useState } from 'react';

import CommonMenu from '@/Components/CommonMenu'
import { Breadcrumb, Layout, Menu, theme, } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;






const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();


  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左侧导航栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} >
        <div style={{ backgroundColor: 'green', height: '5vh', margin: '1vh' }} />
        {/* <Menu theme="dark" defaultSelectedKeys={['page2']} mode="inline" items={items} onClick={menuClick} /> */}
        <CommonMenu></CommonMenu>
      </Sider>

      {/* 右边内容 */}
      <Layout>
        {/* 右边头部 */}
        {/* <Header style={{ padding: 0, background: colorBgContainer }} /> */}

        <Content>
          {/* 右边面包屑 */}
          <Breadcrumb style={{ backgroundColor: '#cdcdcd ', height: '7vh', lineHeight: '7vh', paddingLeft: 24 }}>
            {/* <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
          </Breadcrumb>
          <div style={{ margin: '1vh', padding: '1vh', background: '#cdcdcd', height: '84vh' }}>
            {/* 页面展示在这里 */}
            <Outlet></Outlet>
          </div>
        </Content>
        <div style={{ textAlign: 'center', background: '#cdcdcd', height: '7vh', lineHeight: '7vh', }}>React</div>
      </Layout>
    </Layout>
  );
};

export default App;